<template>
  <div class="register">
    <van-nav-bar
      title="注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
    />
    <div class="kuang"></div>
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="text" label="用户" />
    <!-- 输入手机号，调起手机号键盘 -->
    <van-field v-model="tel" type="tel" label="手机号" />
    <!-- 输入密码 -->
    <!-- 输入密码 -->
    <van-field
      v-model="password"
      :type="wenben"
      label="密码"
      :right-icon="img"
      @click-right-icon="qiehuan"
    />
    <div class="login-btn">
      <van-button round block color="#0C34BA" @click="signIn">注册</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Register",
  data() {
    return {
      text: "",
      tel: "",
      password: "",
      wenben: "password",
      img: "closed-eye",
    };
  },

  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    signIn() {
      if (this.text == "") {
        Toast("请输入用户名称");
      } else {
        if (this.tel == "") {
          Toast("请输入手机号");
        } else {
          if (this.password == "") {
            Toast("请输入密码");
          } else {
            //设置cookie的有效时间为 24 小时
            var time = new Date().getTime() + 24 * 60 * 60 * 1000;
            // console.log("time ==> ", time);
            //将time转换为格林威治时间
            var date = new Date(time).toUTCString();
            // console.log("date ==> ", date);
            document.cookie = "text=" + this.text + ";expires=" + date;
            document.cookie = "tel=" + this.tel + ";expires=" + date;
            document.cookie = "password=" + this.password + ";expires=" + date;
            Toast("注册成功");
            this.$router.push({ name: "SignIn" });
          }
        }
      }
    },
    qiehuan() {
      if (this.wenben == "password") {
        this.wenben = "text";
        this.img = "eye-o";
      } else {
        this.wenben = "password";
        this.img = "closed-eye";
      }
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
.login-btn {
  margin-top: 15px;
}
.kuang {
  width: 100%;
  height: 200px;
}
</style>